<!-- 收集用户的随机输入
目前采用两个方式，一个是摇一摇（需要加速器的权限）还有就是用跟踪鼠标在屏幕上的随机移动。
鼠标跟踪有不少比较炫的特效。找了几个觉得不错。
生成星星的 https://wow.techbrood.com/fiddle/37058
分型（但是和鼠标无关，需要改造） https://wow.techbrood.com/fiddle/37378 
粒子环绕特效 https://wow.techbrood.com/fiddle/34234
单纯的鼠标轨迹跟踪 https://wow.techbrood.com/fiddle/30480
复杂的鼠标轨迹跟踪 https://wow.techbrood.com/fiddle/30323
彩虹方块轨迹跟踪 https://wow.techbrood.com/fiddle/33806
光标轨迹透视特效 https://wow.techbrood.com/fiddle/26059

这个是星星生成特效
-->
<template name="random-collection">
	<view class="container">
		<image class="background-image" mode="aspectFill" src="https://cdn.water-crystal.org/crystals.png" @load="tick"></image>
		<canvas canvas-id="touches" class="canvas" @touchmove="touchMove"></canvas>
		<yu-toast ref="toast" message="用手指涂抹屏幕直到下方数字变为0" :duration="4000" verticalAlign="center"></yu-toast>
		<yu-toast ref="num" :message="run>0? run+'': '0'" :duration="30000" verticalAlign="bottom" backgroundColor="#FFF" color="#F00"></yu-toast>
	</view>
</template>

<script>
	import yuToast from '@/components/yu-toast/yu-toast'
	class Ring {
		constructor(length) {
			this.len = length
			this.arr = new Array(length)
			this.addIndex = 0
		}
		add(x, y) {
			let item = this.arr[this.addIndex]
			if (item) {
				item.x = x
				item.y = y
				item.t = Date.now()
			} else {
				this.arr[this.addIndex] = {
					x: x,
					y: y,
					t: Date.now()
				}
			}
			this.addIndex++
			if (this.addIndex == this.len) this.addIndex = 0
		}
		get(j) {
			return this.arr[j]
		}
	}
	const pointLifetime = 1000;
	var pointCanvasWidth, pointCanvasHeight
	var pointCanvasContext
	var points = new Ring(120);
	export default {
		name: "random-collection",
		components: {
			yuToast
		},
		data() {
			return {
				run: 400
			};
		},
		//created
		mounted() {
			this.$nextTick(function() {
				this.$refs.toast.show()
				this.$refs.num.show()
			})
			pointCanvasContext = uni.createCanvasContext('touches', this)
			uni.createSelectorQuery().in(this).select('.container').boundingClientRect(data => {
				pointCanvasWidth = data.width
				pointCanvasHeight = data.height
				pointCanvasContext.globalCompositeOperation = 'source-over';
				pointCanvasContext.fillStyle = '#FFF';
				pointCanvasContext.fillRect(0, 0, pointCanvasWidth, pointCanvasHeight);
				pointCanvasContext.draw()
			}).exec()
			uni.onWindowResize((res) => {
				pointCanvasWidth = res.size.windowWidth
				pointCanvasHeight = res.size.windowHeight
				pointCanvasContext.globalCompositeOperation = 'source-over';
				pointCanvasContext.fillStyle = '#FFF';
				pointCanvasContext.fillRect(0, 0, pointCanvasWidth, pointCanvasHeight);
				pointCanvasContext.draw()
			})
		},
		beforeDestroy() {
			this.run = 0
		},
		methods: {
			touchMove(e) {
				if (e.changedTouches && e.changedTouches[0]) {
					points.add(e.changedTouches[0].x, e.changedTouches[0].y)
					this.run--
				}
				e.preventDefault()
			},
			tick() {
				this.drawPointCanvas(Date.now());
				if (this.run>0) requestAnimationFrame(this.tick);
				else this.$emit('randnum', Math.random())
			},
			// Draws a line using the recorded cursor positions. This line is used to mask the original image.
			drawPointCanvas(now) {
				pointCanvasContext.globalCompositeOperation = 'source-over';
				pointCanvasContext.fillStyle = '#FFF';
				pointCanvasContext.fillRect(0, 0, pointCanvasWidth, pointCanvasHeight);
				pointCanvasContext.globalCompositeOperation = 'destination-out';
				pointCanvasContext.shadowBlur = 30;
				pointCanvasContext.shadowColor = '#000';
				for (var i = 0; i < 120; i++) {
					var point = points.get(i)
					if (point) {
						var age = now - point.t;
						if (age >= pointLifetime) continue
						var opacity = (pointLifetime - age) / pointLifetime;
						var r = opacity * 50;
						pointCanvasContext.fillStyle = 'rgba(0, 0, 0, ' + opacity + ')';
						pointCanvasContext.beginPath();
						pointCanvasContext.arc(point.x, point.y, r, 0, 2 * Math.PI)
						pointCanvasContext.fill()
					}
				}
				pointCanvasContext.draw()
			},
		},

	}
</script>

<style>
	.container {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		background-color: #FFF;
		align-items: center;
		flex-direction: column;
		justify-content: space-around;
		display: flex;
		z-index: 200
	}

	.canvas {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
	}

	.background-image {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
	}

	.title {
		color: aliceblue;
		font-size: larger;
	}
</style>
